<template>
  <div class="page_set page-miH page-bgBack">
    <open v-if="isOpen" @change="open" />
    <a-layout v-if="data.length > 0">
      <a-row style="margin-bottom: 25px">
        <a-col :span="12" class="pageName">
          <a-select v-if="data.length !== 0" default-value="全部" style="width: 136px" placeholder="搜索年份" @change="handleYear">
            <a-select-option v-for="item in dataYear" :key="item.year">{{ item.year }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-badge :count="listcount" :overflow-count="99" style="margin-right: 15px">
            <a-button type="primary" @click="zongJianYuan">增减员计划</a-button>
          </a-badge>
          <a-button type="primary" @click="addNextMonth"> <a-icon type="plus" />添加次月账单 </a-button>
        </a-col>
      </a-row>
      <div style="display: flex; justify-content: space-between" v-for="(item, i) in data" :key="i">
        <div class="fix-item-wrapper">
          <div class="fix-item-one">
            <p class="fix-item-name">{{ item.year }}年{{ item.month }}月</p>
            <div
              v-if="item.monthWhetherCurrent && item.canNotEdited"
              style="flex-flow: row; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 10px"
            >
              <p
                :style="[
                  { textAlign: 'center' },
                  {
                    color: '#24CDAA'
                  },
                  { background: '#24CDAA36' },
                  { borderRadius: '3px 3px 3px 3px' },
                  { paddingLeft: '5px' },
                  { paddingRight: '5px' },
                  { border: '1px solid #24CDAA' },
                  { fontSize: '11px' },
                  { marginRight: '8px' },
                  { cursor: 'pointer' }
                ]"
              >
                账单已生成
              </p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">在保人数</p>
              <p class="childContentName">{{ item.empSocInfoCount }}人</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">社保缴费</p>
              <p class="childContentName">¥{{ item.socAmount }}元</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">公积金缴费</p>
              <p class="childContentName">¥{{ item.pfAmount }}元</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">本月增员人数</p>
              <p class="childContentName">{{ item.monthIncrement }}人</p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">本月减员人数</p>
              <p class="childContentName">{{ item.monthStop }}人</p>
            </div>
          </div>
          <div class="fix-item-two2">
            <div class="fix-item-one-end" style="cursor: pointer" @click="enterDetail(item.id, item.month, item.year)">查看详情</div>
            <div v-if="item.monthWhetherCurrent" class="fix-item-one-end" style="cursor: pointer" @click="delet(item)">删除</div>
          </div>
        </div>
      </div>
    </a-layout>
    <!-- 添加次月账单弹窗 -->
    <a-modal title="添加次月账单" :visible="isNextVisible" width="444px" @cancel="handleCancel">
      <template slot="footer">
        <a-button key="close" @click="closeNextDetail">关闭</a-button>
        <a-button key="submit" type="primary" @click="enterDetail(data[0].id, data[0].month, data[0].year)">查看详情</a-button>
      </template>
      <div class="modal-box">
        <div style="color: #ff6d6d">
          *
          <span style="color: #000000; font-size: 14px"> 添加次月账单就会默认根据上月参保人账单和增减人员计划，智能计算 </span>
        </div>
        <div class="table-box">
          <div class="result-info-title">计算结果</div>
          <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" class="form-box">
            <a-form-item label="参保月份" class="form-item-box">
              <span>{{ lastYear }}年{{ lastMonth }}月</span>
            </a-form-item>
            <a-form-item label="参保人数" class="form-item-box">
              <span>{{ nextempSocInfoCount }}</span>
            </a-form-item>
            <a-form-item label="企业缴费" class="form-item-box">
              <span>{{ companyAmount }}</span>
            </a-form-item>
            <a-form-item label="个人缴费" class="form-item-box">
              <span>{{ personalAmount }}</span>
            </a-form-item>
            <a-form-item label="合计缴费" class="form-item-box">
              <span>{{ totalAmount }}</span>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-modal>
    <!--首次开通社保弹框提示 -->
    <a-modal title="当前参保月份" :visible="isVisible" @ok="enSure" @cancel="handleClose">
      <div class="modal-box">
        <div style="color: #ff6d6d">
          *
          <span style="color: #000000; font-size: 14px">
            {{ tempYear != "" ? "参保月份：" + tempYear + "年" + tempMonth + "月" : "请选择当前的参保月份" }}
          </span>
        </div>
        <a-form class="monthClose">
          <a-input
            type="button"
            :default-value="`${prevMonth == '00' ? year - 1 : year}年${prevMonth == '00' ? '12' : prevMonth}月`"
            class="month-btn"
            @click="chhooseMonth(prevMonth == '00' ? year - 1 : year, prevMonth == '00' ? '12' : prevMonth)"
          />
          <a-input type="button" :default-value="`${year}年${nowMonth}月`" class="month-btn" @click="chhooseMonth(year, nowMonth)" />
          <a-input
            type="button"
            :default-value="`${nextMonth == '13' ? year + 1 : year}年${nextMonth == '13' ? '01' : nextMonth}月`"
            class="month-btn"
            @click="chhooseMonth(nextMonth == '13' ? year + 1 : year, nextMonth == '13' ? '01' : nextMonth)"
          />
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { saveEmpSocInfoNextMonth, getEmpSocInfoMonthList, empSocMonths, deleteEmpSocInfos, getNoCount } from "@/api/shebao/shebaoInfo.js";
import Open from "./components/open";
const columns = [
  {
    title: "参保月份",
    key: "yearMonth",
    align: "left",
    ellipsis: true,
    scopedSlots: { customRender: "yearMonth" }
  },
  {
    title: "参保人数",
    dataIndex: "empSocInfoCount",
    align: "left",
    ellipsis: true
  },
  {
    title: "社保缴费",
    dataIndex: "socAmount",
    align: "left",
    ellipsis: true
  },
  {
    title: "公积金缴费",
    dataIndex: "pfAmount",
    align: "left",
    ellipsis: true
  },
  {
    title: "本月增员人数",
    dataIndex: "monthIncrement",
    align: "left",
    ellipsis: true
  },
  {
    title: "本月减员人数",
    dataIndex: "monthStop",
    align: "left",
    ellipsis: true
  },
  {
    title: "操作",
    key: "action",
    align: "left",
    width: 80,
    scopedSlots: { customRender: "action" }
  }
];
export default {
  components: { Open },
  data() {
    return {
      tempYear: "",
      tempMonth: "",
      selectitem: "全部",
      companyId: this.$store.state.hr.companyId,
      isVisible: false,
      isNextVisible: false,
      searchYear: null,
      year: "",
      month: "",
      columns,
      listcount: 0,
      totalAmount: "",
      data: [],
      dataYear: [],
      lastMonth: "",
      lastYear: "",
      nextempSocInfoCount: "",
      personalAmount: "",
      companyAmount: "",
      dateOpen: false,
      id: "",
      isOpen: true,
      yearList: []
    };
  },
  computed: {
    prevMonth() {
      const month = this.month - 1 >= 10 ? "" + (this.month - 1) : "0" + (this.month - 1);

      return month;
    },
    nowMonth() {
      return this.month >= 10 ? "" + this.month : "0" + this.month;
    },
    nextMonth() {
      const month = this.month + 1 >= 10 ? "" + (this.month + 1) : "0" + (this.month + 1);

      return month;
    }
  },
  created() {
    this.getYear();
    this.checkMonthBill();

    getNoCount(this.$store.state.hr.companyId).then((res) => {
      this.listcount = res.data ? res.data : 0;
    });
  },

  methods: {
    delet(item) {
      if (!item.monthWhetherCurrent) {
        return;
      }
      var that = this;
      this.$confirm({
        title: "是否确认删除？",
        // content: "是否确认删除？",
        // content: "确认删除 " + item.year + "年" + item.month + "月 的参保记录？",
        onOk() {
          const data = [item.id];
          deleteEmpSocInfos(data).then((res) => {
            that.$notification["success"]({
              message: "删除成功"
            });
            that.checkMonthBill();
          });
        }
      });
    },
    handleDate(time) {
      return false;
    },
    open() {
      this.isOpen = false;
      if (this.data && this.data.length !== 0) {
        this.isVisible = false;
      } else {
        this.chhooseMonth(this.year, this.nowMonth);
        this.isVisible = true;
      }
    },
    handleYear(val) {
      this.selectitem = val;
      if (val !== "全部") {
        this.year = val;
      }
      this.checkMonthBill();
    },
    // 选择当前参保月份
    chhooseMonth(year, month) {
      this.tempYear = year;
      this.tempMonth = month;
    },
    // 设定当前年月
    getYear() {
      var date = new Date();
      const m = date.getMonth() + 1;
      var pm = date.getMonth();
      var year = date.getFullYear();
      var nm = date.getMonth() + 2;
      this.year = year;
      this.month = m;
    },
    // 关闭次月账单
    closeNextDetail() {
      this.isNextVisible = false;
    },
    handleClose() {
      this.tempYear = "";
      this.tempMonth = "";
      this.isVisible = false;
      if (this.data.length === 0) {
        this.isOpen = true;
      }
    },
    enSure() {
      const data = {
        companyId: this.$store.state.hr.companyId,
        month: this.tempMonth,
        year: this.tempYear
      };

      empSocMonths(data).then((res) => {
        this.isVisible = false;
        this.year = this.tempYear;
        this.month = this.tempMonth;
        this.checkMonthBill();
      });
    },
    zongJianYuan() {
      this.isNextVisible = false;
      this.$router.push({
        path: "/shebao/shebaoManage/shebaoZengJianY"
      });
    },
    // 添加次月参保账单
    addNextMonth() {
      const that = this;
      this.$confirm({
        title: "创建次月账单",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        content: "正在创建次月参保，创建后上月参保管理将不能修改，是否确认创建?",
        onOk() {
          that.getYear();
          const month = that.month >= 10 ? that.month : "0" + that.month;
          const year = that.year;
          const data = {
            companyId: that.$store.state.hr.companyId,
            month: month,
            year: "" + year
          };
          saveEmpSocInfoNextMonth(data).then((res) => {
            if (res.data === "") {
              that.isNextVisible = true;
              that.month = month;
              that.year = year;
              that.$notification["success"]({
                message: "添加成功"
              });
            } else {
              that.$notification["error"]({
                message: "已有两个新账单，不能继续添加"
              });
            }
            that.checkMonthBill();
          });
        }
      });
    },
    // 进入月份缴纳社保详情
    enterDetail(id, month, year) {
      this.isNextVisible = false;
      this.$router.push({
        path: "/shebao/shebaoManage/shebaoDetail",
        query: {
          id,
          month,
          year: year
        }
      });
    },
    handleCancel() {
      this.isNextVisible = false;
    },

    // 查询参保月份账单
    checkMonthBill() {
      this.isOpen = false;
      var data = {
        companyId: this.$store.state.hr.companyId
      };
      if (this.selectitem !== "全部") {
        data.year = this.year;
        // data.month = this.month;
      } else {
        data = {
          companyId: this.$store.state.hr.companyId
        };
      }

      getEmpSocInfoMonthList(data).then((res) => {
        this.data = res.data;

        if (this.selectitem === "全部") {
          var hash = {};
          this.dataYear = this.data.reduce(function (arr, current) {
            hash[current.year] ? "" : (hash[current.year] = true && arr.push(current));
            return arr;
          }, []);
          if (this.dataYear.length !== 0) {
            var obj3 = JSON.parse(JSON.stringify(this.dataYear[0]));
            obj3.year = "全部";
            this.dataYear.unshift(obj3);
          }
        }

        if (this.data && this.data.length !== 0) {
          this.personalAmount = this.data[0].personalAmount;
          this.companyAmount = this.data[0].companyAmount;
          this.lastMonth = this.data[0].month;
          this.lastYear = this.data[0].year;
          this.nextempSocInfoCount = this.data[0].empSocInfoCount;
          this.totalAmount = this.data[0].amountCount;
          this.isVisible = false;
          this.isOpen = false;
        } else {
          this.isOpen = true;
          this.getYear();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.monthClose {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  .month-btn {
    display: inline-block;
    width: 106px;
    height: 34px;
    background: rgba(242, 242, 242, 1);
    border-radius: 4px;
    font-size: 14px;
  }
}
.modal-box {
  padding: 20px;
}

.table-box {
  margin-top: 24px;
  border: 1px solid #eee;
  .result-info-title {
    text-align: center;
    height: 40px;
    border-bottom: 1px solid #eee;
    line-height: 40px;
    background: rgba(250, 250, 250, 1);
  }
}
.form-box {
  padding: 0;
}
.form-item-box {
  margin: 0;
  padding-left: 10px;
  border-bottom: 1px solid #eee;
  span {
    margin-left: 48px;
  }
}
.opreate {
  color: var(--primary);
  cursor: pointer;
}
.yearSelect {
  color: var(--primary);
}
.fix-item-wrapper {
  width: 100%;
  display: flex;
  height: 110px;
  background: #ffffff;
  border-radius: 5px;
  margin-bottom: 25px;
  align-items: center;
  border: 1px solid #e8e8e8;
  display: flex;
  .childpProjectName {
    margin-top: 17px;
    width: 100px;
    font-size: 14px;
    font-weight: 300;
    color: #9c9c9c;
  }
  .childContentName {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
  }
  .fix-item-one {
    height: 40px;
    display: flex;
    align-self: center;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    width: 50%;
    border-right: 1px solid #e8e8e8;
  }
  .fix-item-one-end {
    width: 60px;
    font-size: 14px;
    color: var(--primary);
    text-align: center;
  }

  .fix-item-one-end-point {
    display: flex;
    align-self: center;

    font-size: 8px;
    color: var(--primary);
    padding-bottom: 5px;
    margin-left: 35px;
    cursor: pointer;
  }
  .fix-item-two {
    padding-left: 35px;

    width: 30%;
    height: 45px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 1px solid #e8e8e8;
  }
  .fix-item-two2 {
    flex-direction: row;
    width: 30%;
    height: 45px;
    display: flex;

    align-items: center;
    justify-content: center;
  }
  .fix-item-name {
    font-size: 20px;
    margin-bottom: 0px;
    font-weight: 500;
    color: #3c3d43;
    text-align: center;
    width: 150px;
  }
}
</style>
